<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      ref="menuDatagridFormRef"
      :buttons="buttons"
      :columns="columns"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-page-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #btnConvertSlot>
        <el-button @click="onConvert" type="success">视图模型转换</el-button>
      </template>
      <template #formSlot>
        <el-descriptions :column="4" border>
          <el-descriptions-item label-align="right" label-width="150px" :span="2">
            <template #label>
              <div class="required">视图模型名称</div>
            </template>
            <div>
              <el-form-item
                prop="modelName"
                :rules="[
                  {
                    required: true,
                    message: '模型名称不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formData.modelName" placeholder="请输入模型名称..."></el-input>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>排序号</div>
            </template>
            <div>
              <el-form-item prop="sortNo" :rules="[]">
                <el-input-number v-model="formData.sortNo"></el-input-number>
              </el-form-item>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label-align="right" label-width="150px" :span="4">
            <template #label>
              <div>视图模板</div>
            </template>
            <div>
              <el-form-item prop="modelSchema">
                <basic-editor ref="jsonRef" v-model="formData.modelSchema" style="height: 500px"></basic-editor>
              </el-form-item>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>
    </dw-menu-datagrid-form>
    <convert-result-drawer ref="drawerRef"></convert-result-drawer>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig, IAddInfoHttpConfig, IHttpConfig, IButton } from '@/types/menu-datagrid-form';
import BasicEditor from '@/components/code-editor/basic-editor/index.vue';
import type { IViewerModel } from './IViewerModel';
import { ElMessage } from 'element-plus';
import ConvertResultDrawer from './components/convert-result-drawer.vue';

defineOptions({
  name: 'SysViewerModel',
});
const formData: IViewerModel = {
  id: '',
  modelName: '',
  modelSchema: '',
  sortNo: 1,
};
const buttons: IButton[] = [
  {
    code: 'add',
    extendFlag: true,
  },
  {
    slotName: 'btnConvertSlot',
    extendFlag: false,
  },
];
const dataGridTitle = '视图模型列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IViewerModel): string => {
  if (stateValue === 'add') {
    return '视图模型转换';
  } else {
    return data.modelName;
  }
};
const drawerRef = ref();
const menuDatagridFormRef = ref();
const onConvert = () => {
  const ids: string[] = [];
  const rows = menuDatagridFormRef.value.getSelectionRows();
  if (rows.length === 0) {
    ElMessage.error('请选择要转换的记录');
    return;
  }
  rows.forEach((row: IViewerModel) => {
    ids.push(row.id);
  });
  drawerRef.value.open(ids, rows);
};
const columns = ref<IColumn[]>([
  {
    prop: 'modelName',
    label: '接口名称',
    align: 'left',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/viewer/model/#{id}',
  delInfoMsgEmphasize: '#{apiName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/viewer/model/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IViewerModel> = {
  url: '/admin-api/sys/viewer/model/page/list',
};
const getInfoHttpConfig: IHttpConfig = {
  url: '/admin-api/sys/viewer/model/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IViewerModel> = {
  url: '/admin-api/sys/viewer/model',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IViewerModel> = {
  url: '/admin-api/sys/viewer/model',
};
</script>
